import React from 'react'
import {List,Icon} from 'antd'
import classNames from 'classnames'

const TodoList=({todos,onDelete})=>{
    const {Item}=List
    // const onDelete=()=>{

    // }
    return(
        <div className="list-wrap">
            {
                todos.length===0?(
                <p>暂无待办事项</p>
                ):(
                    // List组件来自于antd
                    // 逻辑 先配置数据源 renderItem负责每一个jsx输出
                    <List
                        itemLayout='horizontal'
                        dataSource={todos}
                        renderItem={({id,text,finished},idx)=>{
                            const className=classNames({
                                "list-item":true,
                                "list-item__finished":finished
                            })
                            return(
                                <Item className={className}>
                                    <div className="list-wrap-item ">
                                        <span className="list-item-text">{text}</span>
                                        <Icon type="delete" onClick={onDelete.bind(null,id)}/>
                                    </div>
                                </Item>
                            )
                        }}
                    />
                )
            }
        </div>
        )
    {/* {todos.map(todo=><li key={todo.id}>{todo.text}</li>)} */}
    

}

export default TodoList